<template>
  <div>
    <!-- 导航栏 -->
    <NavBar fixed placeholder left-arrow :border="false" @click-left="onClickLeft">
      <template #left>
        <Icon color="#16142D" name="arrow-left" size="20" />
      </template>
      <template #title>
        <div style="font-family: PingFangSC-Regular; font-size: 16px; color: #16142d; font-weight: 400">
          提前还款测一测
        </div>
      </template>
    </NavBar>
    <div style="padding: 20px 16px 0px">
      <!-- 计划还款金额 -->
      <div class="planAmount">
        <div>您计划的提前还款金额</div>
        <Field
          v-model="planAmount"
          type="number"
          placeholder="请输入提前还款的金额"
          class="planAmount_Field"
          maxlength="10"
          input-align="right"
          :border="false"
          @blur="planAmountChange"
        />
        <div>万元</div>
      </div>
      <!-- 提前还款---目前贷款情况 -->
      <div class="prepayment">
        <div class="prepayment_title">
          <div></div>
          <div class="prepayment_title_text">
            <div>去提前还款</div>
            <div>—目前贷款情况</div>
          </div>
        </div>
        <!-- 剩余贷款本金 -->
        <div class="prepayment_content">
          <div>
            <div class="prepayment_content_left">
              <div>剩余贷款本金</div>
              <img src="../../assets/prepaymentTest/info.png" class="infoimg" @click="isInfoClick1" />
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="residueAmount"
                type="number"
                placeholder="请输入目前剩余的贷款本金"
                class="prepayment_Field"
                style="width: 145px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="residueAmountChenge"
              />
              <div>万元</div>
            </div>
          </div>
        </div>
        <div v-show="isInfo1 == true" class="info">
          <div>
            <img src="../../assets/prepaymentTest/info.png" class="infoimg" />
            <div>剩余贷款本金</div>
          </div>
          <div>指当前剩余贷款的金额。您可以通过贷款机构进行查询。</div>
        </div>
        <!-- 剩余还款期数 -->
        <div class="prepayment_content">
          <div>
            <div class="prepayment_content_left">
              <div>剩余还款期数</div>
              <img src="../../assets/prepaymentTest/info.png" class="infoimg" @click="isInfoClick2" />
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="residuePeriods"
                type="digit"
                placeholder="请输入目前贷款的剩余还款期数"
                class="prepayment_Field"
                style="width: 165px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="residuePeriodsChenge"
              />
              <div>期</div>
            </div>
          </div>
        </div>
        <div v-show="isInfo2 == true" class="info">
          <div>
            <img src="../../assets/prepaymentTest/info.png" class="infoimg" />
            <div>剩余还款期数</div>
          </div>
          <div>指还需要继续偿还多少个月才能将贷款还清。您可以通过贷款机构进行查询。</div>
        </div>
        <!-- 贷款年利率 -->
        <div class="prepayment_content">
          <div>
            <div class="prepayment_content_left">
              <div>贷款年利率</div>
              <img src="../../assets/prepaymentTest/info.png" class="infoimg" @click="isInfoClick3" />
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="AnnualInterestRate"
                type="number"
                placeholder="请输入目前贷款的贷款年利率"
                class="prepayment_Field"
                style="width: 175px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="AnnualInterestRateChenge"
              />
              <div>%</div>
            </div>
          </div>
        </div>
        <div
          v-show="isInfo3 == false"
          style="
            text-align: right;
            font-size: 10px;
            color: #9d9baf;
            -webkit-transform: scale(0.9);
            margin-right: 10px;
            margin-top: -5px;
            margin-bottom: 16px;
          "
        >
          可参照5年期贷款基准利率4.95%
        </div>
        <div v-show="isInfo3 == true" class="info">
          <div>
            <img src="../../assets/prepaymentTest/info.png" class="infoimg" />
            <div>贷款年利率</div>
          </div>
          <div>指本贷款的利率水平。您可以通过贷款机构进行查询。</div>
        </div>
        <div class="way">
          <div>还款方式</div>
          <div @click="showPopup">
            <div>{{ amount }}</div>
            <Icon name="arrow" style="color: #858593; font-size: 12px" />
          </div>
        </div>
      </div>
    </div>
    <!-- 不提前还款---拿钱去投资 -->
    <div id="jisuanqi" style="padding: 0 16px">
      <div class="prepayment">
        <div class="prepayment_title">
          <div></div>
          <div class="prepayment_title_text">
            <div>不提前还款</div>
            <div>—这些钱拿去投资</div>
          </div>
        </div>
        <!-- 年化投资收益率 -->
        <div class="prepayment_content">
          <div>
            <div class="prepayment_content_left">
              <div>年化投资收益率</div>
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="YearYield"
                type="number"
                placeholder="请输入目前年化投资收益率"
                class="prepayment_Field"
                style="width: 170px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="YearYieldChenge"
              />
              <div>%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 不提前还款与提前还款金额对比 -->
    <div class="comparison">
      <img
        src="../../assets/prepaymentTest/2.1.png"
        style="width: 60px; height: 54px; position: absolute; top: -31px; left: 63px"
      />
      <img
        src="../../assets/prepaymentTest/2.2.png"
        style="width: 60px; height: 54px; position: absolute; top: -31px; right: 57px"
      />
      <!-- 不提前还款vs提前还款 -->
      <div class="comparison_vs">
        <div>提前还款</div>
        <img src="../../assets/prepaymentTest/2.4.png" style="width: 40px; height: 37px" />
        <div>不提前还款</div>
      </div>
      <div>
        <div class="comparison_title1">
          <div>
            <div>节省利息支出</div>
            <p></p>
          </div>
          <div>
            <div>投资收益总额</div>
            <p></p>
          </div>
        </div>
        <div class="comparison_money1">
          <div><span>210000</span><span>元</span></div>
          <div><span>5000</span><span>元</span></div>
        </div>
        <div class="comparison_title2">
          <div>
            <div>月供少还</div>
            <p></p>
          </div>
          <div>
            <div>投资本金总额</div>
            <p></p>
          </div>
        </div>
        <div class="comparison_money2">
          <div><span>1900</span><span>元/月</span></div>
          <div><span>300000</span><span>元</span></div>
        </div>
        <div class="jiantou">
          <!-- <img src="../../assets/prepaymentTest/3.0.16.png" style="height: 21px;" /> -->
          <div>1700元/月</div>
          <img src="../../assets/prepaymentTest/8113848.png" style="height: 6px" />
          <div>1500元/月</div>
        </div>
        <div class="zhuyi">注：本测算结果是建立在假设基础之上，所得结果仅供参考，不能视作或代替专业意见。</div>
      </div>
      <div class="comparison_img">
        <img src="../../assets/prepaymentTest/banner.png" />
      </div>
    </div>
  </div>
  <Popup
    v-model:show="show"
    round
    position="bottom"
    :close-on-click-overlay="false"
    close-on-popstate
    :style="{ height: '293px' }"
  >
    <div
      style="
        font-size: 15px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(232, 234, 238, 1);
      "
    >
      <div style="color: #9d9baf" @click="show = false">取消</div>
      <div @click="affirm">确认</div>
    </div>
    <Picker
      v-model="selectedValues"
      style="margin-top: -50px; z-index: -1"
      :columns="columns"
      :show-toolbar="false"
      :option-height="48"
      @change="onChange"
    />
  </Popup>
</template>

<script setup>
import { NavBar, Icon, Field, Popup, Picker } from 'vant'
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
// const { proxy } = getCurrentInstance();
// onMounted(() => {

// });
// 定义计划还款金额变量
let planAmount = ref(Number)
const planAmountChange = (e) => {
  planAmount.value = Math.round(e.target._value * 100) / 100
  console.log('定义计划还款金额变量', planAmount.value)
}
// 剩余还款金额
let residueAmount = ref(Number)
const residueAmountChenge = (e) => {
  residueAmount.value = Math.round(e.target._value * 100) / 100
  console.log('剩余还款金额', residueAmount.value)
}
// 剩余还款期数
let residuePeriods = ref(Number)
const residuePeriodsChenge = (e) => {
  residuePeriods.value = Math.round(e.target._value * 100) / 100
  console.log('剩余还款期数', residuePeriods.value)
}
// 贷款年利率
let AnnualInterestRate = ref(Number)
const AnnualInterestRateChenge = (e) => {
  AnnualInterestRate.value = Math.round(e.target._value * 100) / 100
  console.log('贷款年利率', AnnualInterestRate.value)
}
// 年化投资收益率
let YearYield = ref(Number)
const YearYieldChenge = (e) => {
  YearYield.value = Math.round(e.target._value * 100) / 100
  console.log('年化投资收益率', YearYield.value)
}

// 弹窗里的选择器
const columns = [
  {
    text: '按月等额本息',
    value: '按月等额本息',
  },
  {
    text: '按月等额本金',
    value: '按月等额本金',
  },
]
let monthly = ref('')
let amount = ref('按月等额本息')
//选择器变化事件
const onChange = ({ selectedValues }) => {
  monthly.value = selectedValues.join(',')
  console.log(monthly.value)
}
const show = ref(false)
// 点击打开弹窗
const showPopup = () => {
  show.value = true
}
// 点击弹窗确认按钮
const affirm = () => {
  show.value = false
  amount.value = monthly.value
}
let isInfo1 = ref(false)
let isInfo2 = ref(false)
let isInfo3 = ref(false)
const isInfoClick1 = () => {
  if (isInfo1.value == false) {
    isInfo1.value = true
  } else {
    isInfo1.value = false
  }
}
const isInfoClick2 = () => {
  if (isInfo2.value == false) {
    isInfo2.value = true
  } else {
    isInfo2.value = false
  }
}
const isInfoClick3 = () => {
  if (isInfo3.value == false) {
    isInfo3.value = true
  } else {
    isInfo3.value = false
  }
}
</script>

<style scoped>
@import url(./style/prepaymentTest.css);
* {
  --van-cell-vertical-padding: 0;
  --van-cell-horizontal-padding: 0;
}
</style>